<template>
  <div class="datatable">
    <div class="datatableBox">
      <div class="action">
        <n-space>
          <n-button ghost type="primary" size="small">
            <template #icon>
              <n-icon>
                <AddCircle></AddCircle>
              </n-icon>
            </template>
          </n-button>
        </n-space>
      </div>
      <div class="inputSearch">
        <n-select
          v-model:value="targetData.data.baseId"
          filterable
          placeholder="请选择 数据集"
          :options="options"
          value-field="id"
          label-field="name"
          :on-update:value="handleSelect"
        />
      </div>

      <template v-if="targetData.data.colums&&targetData.data.colums.length > 0">
        <draggable class="treebox" v-model="targetData.data.colums" group="columns1" animation="300" itemKey="field">
          <template #item="{ element }">
            <div class="columnsitem" :data-data="JSON.stringify(element)">
              <component :is="element.prefix"></component>
              <span style="margin-left: 5px">{{ element.name }}</span>
            </div>
          </template>
        </draggable>
      </template>
      <template v-if="columns.length == 0">
        <div class="aic jcc h100">
          <n-empty size="large" description="请选择数据集"> </n-empty>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h, computed, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useMessage, NIcon, TreeOption, useThemeVars } from 'naive-ui'
import { FlashOutline } from '@vicons/ionicons5'
import { Reader, AddCircle } from '@vicons/ionicons5'
const message = useMessage()
const themeVars = useThemeVars()
import { PageEnum } from '@/enums/pageEnum'
import { TabsBottomType } from '@/enums/editReportEnum'
import Draggable from 'vuedraggable'
import { useReportStore } from '@/views/Bi/store/useReportStore'
import { useTargetData } from '@/views/Bi/hooks/useTargetData'
import { cloneDeep } from 'lodash'
const reportStore = useReportStore()
const pattern = ref(null)
const columns = ref([])
const route = useRoute()
const props = defineProps({
  upData: {
    type: Boolean,
    required: true
  }
})
const { targetData } = useTargetData()
const handleSelect = (key: any) => {
  //   const { id } = route.params
  // // id 标识
  // const biReportId = typeof id === 'string' ? id : id[0]
  //获取 当前底部导航索引值

  targetData.value.data.baseId = key
  // console.log('targetData.data.options.id :>> ', targetData.value.data.options.id);
  initColumns(true)
}
const initOption = () => {
  return cloneDeep(
    reportStore.getDataBase.map((res: any) => {
      res.meta = res.meta.map((metaItem: any) => {
        return {
          name: metaItem.name,
          field: metaItem.field,
          prefix: () =>
            h(NIcon, null, {
              default: () => h(Reader)
            })
        }
      })
      return res
    })
  )
}
const initColumns = (bool:boolean) => {

  //获取当前选择数据源
  if(targetData.value.data.baseId){

  let dataTable: any = options.value.find((res: any) => res.id == targetData.value.data.baseId)
  targetData.value.data.options = cloneDeep(dataTable)
  targetData.value.data.colums = targetData.value.data.options.meta
      // console.log('targetData :>> ', targetData.value.data);
  }

}
const options = ref([])
const drag = ref(false)
const onStart = () => {
  drag.value = true
}

const onEnd = () => {
  drag.value = false
}
watch(
  () => props.upData,
  data => {
   
    initColumns(true)
  },
  {
    deep: true,
  }
)

const nodeProps = ({ option }: { option: TreeOption }) => {
  return {
    onClick() {
      if (!option.children && !option.disabled) {
        console.log('option :>> ', option)
        message.info('[Click] ' + option)

        //  写入右侧面包屑
        //
      }
    }
  }
}

onMounted(()=>{
  options.value =  initOption()
})
</script>

<style lang="scss" scoped>
.datatable {
  // background-color: #c48;
  .datatableBox {
    height: 100%;

    background-color: v-bind('themeVars.bodyColor');
  }
}
.action {
  margin: 10px 10px 0;
}
.inputSearch {
  margin: 10px 10px 0;
}
.treebox {
  margin-top: 10px;
  margin-left: 10px;
  height: 150px;
  min-height: calc(100% - 103px);
  background-color: v-bind('themeVars.modalColor');
}
</style>
